<template>
    <div id="main"></div>    
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'

export default {
    name: 'test1',
    data() {
        return {
            data: [],
            xdata: []
        }
    },
    created() {
        // this.data = [820, 932, 901, 934, 1290, 1330, 1320]
        // this.xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    async mounted() {
        let myecharts = document.getElementById('main')
        let myChart = echarts.init(myecharts, null, {
            width: 800,
            height: 400
        })
       await  axios.get('/api/kwh/find2',{
            method: 'get',
            params: {'NO': 12, from: '2024/8/1 00:59:00', to: '2024/8/1 13:59:00'},
        }).then (res => {
            
            this.xdata = res.data.map(item => item.datestr)
            this.data = res.data.map(item => item.kwh)
        })
        let option = {
            xAxis: {
                type: 'category',
                data: this.xdata
            },
            yAxis: {
                type: 'value'
            },
            tooltip:{},
            series: [
                {
                data: this.data,
                type: 'line',
                smooth: true
                }
            ]
        }

        myChart.setOption(option)
    }
}
</script>